<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>Device</title>
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.css" />
		<link rel="stylesheet" href="css/style.css" />
		 <link rel="stylesheet" type="text/css" href="./css/font.css"/>
	</head>
	<body>
		<div class="bui-page bui-box-vertical">
			<header>
				<!-- 固定顶部区 -->
				<!--    <div class="bui-bar">
                <div class="bui-bar-left">
                    <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
                </div>
                <div class="bui-bar-main">模板页</div>
                <div class="bui-bar-right">
                </div>
            </div> -->
				<div id="searchbar" class="bui-searchbar bui-box">
					<div class="span7">
						<div class="bui-input" style="border-radius: 50px;">
							<i class="icon-search"></i>
							<input type="search" value="" placeholder="income" />
						</div>
					</div>
					<!-- <div class="btn-search">搜索</div> -->
					<div class="span2">
						<!-- 单个下拉结构 -->
						<div id="uiDoropdownClass" class="bui-dropdown">
							<div class="bui-btn bui-box" id="tf">
								<div class="span1">all</div>
								<i class="icon-dropdown"></i>
							</div>
							<ul class="bui-list" style="border-radius: 18px;">
								<li class="bui-btn" value="all">all</li>
								<li class="bui-btn" value="Level One">Level One</li>
								<li class="bui-btn" value="Level Two">Level Two</li>
								<li class="bui-btn" value="Level Three">Level Three</li>
								<li class="bui-btn" value="Level Four">Level Four</li>
							</ul>
						</div>
					</div>
				</div>
			</header>
			<main>
				<!-- 固定中间滚动内容区 -->
				<div id="mask" class="bui-panel" style="height: 100%;">
					<ul class="bui-list bui-list-thumbnail">
						<li  href="deviceDetail.html"  class="bui-btn bui-box" style="background-color: #f1f4fb;margin: 16px;border-radius: 8px;" >
							<div class="bui-thumbnail " data-sub=""><img src="img/aefc49158f849761d93923a3faa7484f.jpg"
									alt=""></div>
							<div class="span1">
								<h3 class="item-title">Medical protective clothing</h3>
								<p class="item-text">income：<span>25.00-40.00</span></p>
								<div class="bui-box-space example-box3" style="margin-top: 15px;">
									<div class="span1">
										<h1 class="" style="color: #2b58da;">Rs <span>500</span> </h1>
									</div>
									<div class="span1">
										<div class="span1"
											style="width: 100%; height: 25px;text-align: center;line-height: 25px;  size: 5px; background-color: #2b58da;color: white; border-radius: 50px;float: left;">
											<span>Activate</span></div>
									</div>
								</div>


							</div>

						</li>
						<li href="deviceDetail.html" class="bui-btn bui-box" style="background-color: #f1f4fb;margin: 16px;border-radius: 8px;" >
							<div class="bui-thumbnail " data-sub=""><img src="img/aefc49158f849761d93923a3faa7484f.jpg"
									alt=""></div>
							<div class="span1">
								<h3 class="item-title">Medical protective clothing</h3>
								<p class="item-text">income：<span>25.00-40.00</span></p>
								<div class="bui-box-space example-box3" style="margin-top: 15px;">
									<div class="span1">
										<h1 class="" style="color: #2b58da;">Rs <span>500</span> </h1>
									</div>
									<div class="span1">
										<div class="span1"
											style="width: 100%; height: 25px;text-align: center;line-height: 25px;  size: 5px; background-color: #2b58da;color: white; border-radius: 50px;float: left;">
											<span>Activate</span></div>
									</div>
								</div>


							</div>

						</li>
						<li href="deviceDetail.html" class="bui-btn bui-box" style="background-color: #f1f4fb;margin: 16px;border-radius: 8px;">
							<div class="bui-thumbnail " data-sub=""><img src="img/aefc49158f849761d93923a3faa7484f.jpg"
									alt=""></div>
							<div class="span1">
								<h3 class="item-title">Medical protective clothing</h3>
								<p class="item-text">income：<span>25.00-40.00</span></p>
								<div class="bui-box-space example-box3" style="margin-top: 15px;">
									<div class="span1">
										<h1 class="" style="color: #2b58da;">Rs <span>500</span> </h1>
									</div>
									<div class="span1">
										<div class="span1"
											style="width: 100%; height: 25px;text-align: center;line-height: 25px;  size: 5px; background-color: #2b58da;color: white; border-radius: 50px;float: left;">
											<span>Activate</span></div>
									</div>
								</div>


							</div>

						</li>
						<li href="deviceDetail.html" class="bui-btn bui-box" style="background-color: #f1f4fb;margin: 16px;border-radius: 8px;">
							<div class="bui-thumbnail " data-sub=""><img src="img/aefc49158f849761d93923a3faa7484f.jpg"
									alt=""></div>
							<div class="span1">
								<h3 class="item-title">Medical protective clothing</h3>
								<p class="item-text">income：<span>25.00-40.00</span></p>
								<div class="bui-box-space example-box3" style="margin-top: 15px;">
									<div class="span1">
										<h1 class="" style="color: #2b58da;">Rs <span>500</span> </h1>
									</div>
									<div class="span1">
										<div class="span1"
											style="width: 100%; height: 25px;text-align: center;line-height: 25px;  size: 5px; background-color: #2b58da;color: white; border-radius: 50px;float: left;">
											<span>Activate</span></div>
									</div>
								</div>


							</div>

						</li>
						<li href="deviceDetail.html" class="bui-btn bui-box" style="background-color: #f1f4fb;margin: 16px;border-radius: 8px;">
							<div class="bui-thumbnail " data-sub=""><img src="img/aefc49158f849761d93923a3faa7484f.jpg"
									alt=""></div>
							<div class="span1">
								<h3 class="item-title">Medical protective clothing</h3>
								<p class="item-text">income：<span>25.00-40.00</span></p>
								<div class="bui-box-space example-box3" style="margin-top: 15px;">
									<div class="span1">
										<h1 class="" style="color: #2b58da;">Rs <span>500</span> </h1>
									</div>
									<div class="span1">
										<div class="span1"
											style="width: 100%; height: 25px;text-align: center;line-height: 25px;  size: 5px; background-color: #2b58da;color: white; border-radius: 50px;float: left;">
											<span>Activate</span></div>
									</div>
								</div>


							</div>

						</li>
						<li href="deviceDetail.html" class="bui-btn bui-box" style="background-color: #f1f4fb;margin: 16px;border-radius: 8px;">
							<div class="bui-thumbnail " data-sub=""><img src="img/aefc49158f849761d93923a3faa7484f.jpg"
									alt=""></div>
							<div class="span1">
								<h3 class="item-title">Medical protective clothing</h3>
								<p class="item-text">income：<span>25.00-40.00</span></p>
								<div class="bui-box-space example-box3" style="margin-top: 15px;">
									<div class="span1">
										<h1 class="" style="color: #2b58da;">Rs <span>500</span> </h1>
									</div>
									<div class="span1">
										<div class="span1"
											style="width: 100%; height: 25px;text-align: center;line-height: 25px;  size: 5px; background-color: #2b58da;color: white; border-radius: 50px;float: left;">
											<span>Activate</span></div>
									</div>
								</div>


							</div>

						</li>
						<li href="deviceDetail.html" class="bui-btn bui-box" style="background-color: #f1f4fb;margin: 16px;border-radius: 8px;">
							<div class="bui-thumbnail " data-sub=""><img src="img/aefc49158f849761d93923a3faa7484f.jpg"
									alt=""></div>
							<div class="span1">
								<h3 class="item-title">Medical protective clothing</h3>
								<p class="item-text">income：<span>25.00-40.00</span></p>
								<div class="bui-box-space example-box3" style="margin-top: 15px;">
									<div class="span1">
										<h1 class="" style="color: #2b58da;">Rs <span>500</span> </h1>
									</div>
									<div class="span1">
										<div class="span1"
											style="width: 100%; height: 25px;text-align: center;line-height: 25px;  size: 5px; background-color: #2b58da;color: white; border-radius: 50px;float: left;">
											<span>Activate</span></div>
									</div>
								</div>


							</div>

						</li>
						<li class="bui-btn bui-box" style="background-color: #f1f4fb;margin: 16px;border-radius: 8px;">
							<div class="bui-thumbnail " data-sub=""><img src="img/aefc49158f849761d93923a3faa7484f.jpg"
									alt=""></div>
							<div class="span1">
								<h3 class="item-title">Medical protective clothing</h3>
								<p class="item-text">income：<span>25.00-40.00</span></p>
								<div class="bui-box-space example-box3" style="margin-top: 15px;">
									<div class="span1">
										<h1 class="" style="color: #2b58da;">Rs <span>500</span> </h1>
									</div>
									<div class="span1">
										<div class="span1"
											style="width: 100%; height: 25px;text-align: center;line-height: 25px;  size: 5px; background-color: #2b58da;color: white; border-radius: 50px;float: left;">
											<span>Activate</span></div>
									</div>
								</div>


							</div>

						</li>
					</ul>
				</div>
			</main>
			<footer>
				<!-- 固定底部   -->
				<ul class="bui-nav">
					<li class="bui-btn bui-box-vertical " href="index.html">
						<!-- <span class="bui-badges"></span></i> -->
						<img src="img/t-01.png" width="30px" style="margin: 0 auto;">
						<div class="span1">home</div>
					</li>
					<li class="bui-btn bui-box-vertical active">
						<img src="img/t-04.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Device</div>
					</li>
					<li class="bui-btn bui-box-vertical"  href="wallet.html">
						<img src="img/t-05.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Wallet</div>
					</li>
					<li class="bui-btn bui-box-vertical bui-btn-more" href="team.html">
						<img src="img/t-07.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Team</div>
					</li>
					<li class="bui-btn bui-box-vertical bui-btn-more" href="mine.html">
						<img src="img/t-09.png" width="30px" style="margin: 0 auto;">
						<div class="span1">Mine</div>
					</li>
				</ul>
			</footer>
		</div>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js"></script>
		<script>
			bui.ready(function() {
				bui.btn({
					id: ".bui-page",
					handle: ".bui-btn"
				}).load();
				// 所有控件及方法需要在这里执行
				//静态渲染, 选中激活在列表的active样式
				var uiDoropdown2 = bui.dropdown({
					id: "#uiDoropdownClass",
					//设置relative为false,二级菜单继承父层宽度
					relative: true,
					value: "",
					callback: function(e) {
						console.log(this.value());

					}
				})

				// appendTo 为空则添加在整个页面
				var uiMask = bui.mask({
					appendTo: "#mask",
					callback: function() {
						console.log("mask1")
					},
					autoClose: true
				});
			})
		</script>
	</body>
</html>
